<template>
  <div class='list-history'>
    <div class='list-search'>
      <Input v-model='search' placeholder='请输入' clearable style='width: 300px' @on-enter='handleSearch'></Input>
      <Button type='ghost' shape='circle' icon='ios-search' @click='handleSearch'></Button>
    </div>
    <Table v-if="JSON.stringify(cve) !== '{}'" style='margin-top: 20px' :columns='columns' :data='cve' :stripe='true' :border='true' :show-header='true'></Table>
    <div class="list-empty" v-else>
      暂无数据
    </div>
  </div>
</template>
<script>
import historyDetail from './HistoryDetailCVE'

export default {
  name: 'HistoryCVE',
  data () {
    return {
      search: '',
      columns: [
        {
          title: 'cve_id',
          key: 'cve_id'
        },
        {
          title: 'cve_exploitability_Score',
          key: 'cve_exploitability_Score'
        },
        {
          title: 'cve_problem_type',
          key: 'cve_problem_type'
        },
        {
          title: 'cve_publish_date',
          key: 'cve_publish_date'
        },
        {
          title: 'cve_security',
          key: 'cve_security'
        },
        {
          title: 'cve_impact_Score',
          key: 'cve_impact_Score'
        },
        {
          title: 'cve_description',
          key: 'cve_description',
          ellipsis: true
        },
        {
          title: 'cve_company',
          key: 'cve_company',
          ellipsis: true,
          render: (h, params) => {
            const list = params.row.cve_company
            return this.renderColumns(list, h)
          }
        },
        {
          title: 'cve_affects',
          key: 'cve_affects',
          ellipsis: true,
          render: (h, params) => {
            const list = params.row.cve_affects
            return this.renderColumns(list, h)
          }
        },
        {
          title: 'cve_reference',
          key: 'cve_reference',
          ellipsis: true,
          render: (h, params) => {
            const list = params.row.cve_reference
            return this.renderColumns(list, h)
          }
        },
        {
          title: 'action',
          key: 'action',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                },
                '详情'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.setting(params.index)
                    }
                  }
                },
                '设置'
              )
            ])
          }
        }
      ],
      // cve: [
      //   {
      //     cve_affects: [
      //       'vendor_data:bsdi (product_data : bsd_os , version_data :3.1)',
      //       'vendor_data:freebsd (product_data : freebsd , version_data :1.0,1.1,1.1.5.1,1.2,2.0,2.0.1,2.0.5,2.1.5,2.1.6,2.1.6.1,2.1.7,2.1.7.1,2.2,2.2.2,2.2.3,2.2.4,2.2.5,2.2.6,2.2.8,3.0)',
      //       'vendor_data:openbsd (product_data : openbsd , version_data :2.3,2.4)'
      //     ],
      //     cve_company: ['bsdi', 'freebsd', 'openbsd'],
      //     cve_description:
      //       'ip_input.c in BSD-derived TCP/IP implementations allows remote attackers to cause a denial of service (crash or hang) via crafted packets.',
      //     cve_exploitability_Score: 10,
      //     cve_id: 'CVE-1999-0001',
      //     cve_impact_Score: 2.9,
      //     cve_problem_type: 'CWE-20',
      //     cve_publish_date: '1999-12-30T05:00Z',
      //     cve_reference: [
      //       'http://www.openbsd.org/errata23.html#tcpfix',
      //       'http://www.osvdb.org/5707'
      //     ],
      //     cve_security: 'MEDIUM'
      //   },
      //   {
      //     cve_affects: [
      //       'vendor_data:bsdi (product_data : bsd_os , version_data :3.1)',
      //       'vendor_data:freebsd (product_data : freebsd , version_data :1.0,1.1,1.1.5.1,1.2,2.0,2.0.1,2.0.5,2.1.5,2.1.6,2.1.6.1,2.1.7,2.1.7.1,2.2,2.2.2,2.2.3,2.2.4,2.2.5,2.2.6,2.2.8,3.0)',
      //       'vendor_data:openbsd (product_data : openbsd , version_data :2.3,2.4)'
      //     ],
      //     cve_company: [
      //       'bsdi',
      //       'freebsd',
      //       'openbsd',
      //       'longnamecomanylongnamecomanylongnamecomanylongnamecomanylongnamecomany'
      //     ],
      //     cve_description:
      //       'ip_input.c in BSD-derived TCP/IP implementations allows remote attackers to cause a denial of service (crash or hang) via crafted packets.',
      //     cve_exploitability_Score: 10,
      //     cve_id: 'CVE-1999-0001',
      //     cve_impact_Score: 2.9,
      //     cve_problem_type: 'CWE-20',
      //     cve_publish_date: '1999-12-30T05:00Z',
      //     cve_reference: [
      //       'http://www.openbsd.org/errata23.html#tcpfix',
      //       'http://www.osvdb.org/5707'
      //     ],
      //     cve_security: 'MEDIUM'
      //   }
      // ]
      cve: {}
    }
  },
  methods: {
    handleSearch () {
      const self = this
      if (this.search.length !== 0) {
        this.$axios
          .get('/api/search_cve', {
            params: {
              cve_id: self.search
            }
          })
          .then(result => {
            self.search = ''
            if (result.data.code === 0) {
              self.cve = {}
            } else {
              self.cve = result.data.data
            }
          })
          .catch(err => {
            self.cve = {}
            self.search = ''
            // this.$Message.error(JSON.stringify(err))
            console.log(err)
          })
      }
    },

    renderColumns (list, h) {
      let result = ''
      for (let i = 0, len = list.length; i < len; i++) {
        result += `${list[i]}; `
      }
      return h(
        'div',
        {
          style: {
            'text-overflow': 'ellipsis',
            'overflow': 'hidden',
            'white-space': 'nowrap'
          }
        },
        result
      )
    },

    show (index) {
      this.$Modal.info({
        width: 800,
        render: (h) => {
          return h(historyDetail, {
            props: {
              cve: this.cve[index]
            }
          })
        }
      })
    }
  }
}
</script>
<style>
.list-empty {
  margin: 200px auto;
  text-align: center;
}
</style>
